<template>
  <div class="page-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-form ref="searchFormRef" :model="searchParams" :rules="searchFormRules" inline size="medium">
        <el-form-item label="车牌号码:" prop="carNumber">
          <el-input v-model="searchParams.carNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="缴纳状态:" prop="paymentStatus">
          <el-select v-model="searchParams.paymentStatus">
            <el-option label="全部" value="" />
            <el-option label="已缴纳" value="1" />
            <el-option label="未缴纳" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchPayment">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 缴费数据列表 -->
    <el-table :data="paymentList" :header-cell-style="{ background: '#f7f8f9' }">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="车牌号码" prop="carNumber" />
      <el-table-column label="收费类型" prop="chargeType">
        <template #default="{ row }">
          {{ chargeTypeObj[row.chargeType] }}
        </template>
      </el-table-column>
      <el-table-column label="停车总时长" prop="parkingTime" />
      <el-table-column label="缴纳费用（元）" prop="actualCharge" />
      <el-table-column label="缴纳状态" prop="paymentStatus">
        <template #default="{ row }">
          {{ paymentStatusObj[row.paymentStatus] }}
        </template>
      </el-table-column>
      <el-table-column label="缴纳方式" prop="paymentMethod">
        <template #default="{ row }">
          {{ paymentMethodObj[row.paymentMethod] || "--" }}
        </template>
      </el-table-column>
      <el-table-column label="缴纳时间" prop="paymentTime" />
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      :page-size="10"
      layout="->, total, prev, pager, next"
      :total="total"
      @current-change="getPaymentList"
    />
  </div>
</template>

<script>
import { getPaymentListAPI } from '@/api/car/carpay'

export default {
  name: 'Carpay',
  data() {
    return {
      // 查询参数
      searchParams: {
        page: 1,
        pageSize: 10,
        carNumber: '',
        paymentStatus: null
      },
      // 查询列表数据校验规则
      searchFormRules: {
        carNumber: [
          { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/, message: '请输入正确的车牌号码', trigger: 'blur' }
        ]
      },
      // 缴费列表数据
      paymentList: [],
      // 缴费列表数据总条数
      total: 0,
      // 收费类型列表
      chargeTypeObj: {
        card: '月卡',
        temp: '临时车'
      },
      // 缴纳状态列表
      paymentStatusObj: {
        0: '未缴纳',
        1: '已缴纳'
      },
      // 缴纳方式列表
      paymentMethodObj: {
        WeChat: '微信',
        Alipay: '支付宝',
        Cash: '线下'
      }
    }
  },
  created() {
    // 获取缴费列表
    this.getPaymentList()
  },
  methods: {
    // 获取缴费列表
    async getPaymentList() {
      const res = await getPaymentListAPI(this.searchParams)
      this.paymentList = res.rows
      this.total = res.total
      console.log(this.paymentList)
    },
    // 搜索缴费列表
    onSearchPayment() {
      this.searchParams.page = 1
      this.getPaymentList()
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-container {
    border-bottom: 1px solid #eee;
    .el-form {
      .el-form-item {
        margin-right: 40px;
      }
    }
  }
  .el-table {
    margin: 25px 0;
  }
}
</style>
